<template>
	<div class="booksgit">
		<div class="tablist">
			<div class="swiper-container presslist" style="border-bottom: 0.1rem dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" @click="findBook(0)">
							全部
					</li>
					<li class="swiper-slide" v-for="(item, i) in pressList" :key="i" @click="findBook(item.id)">
						{{item.name}}
					</li>
				</ul>
			</div>
			<div class="swiper-container presslist" style="border-bottom: 0.1rem dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" @click="findBook2(0)">
							全部
					</li>
					<li class="swiper-slide" v-for="(item, i) in publicationData" :key="i" @click="findBook2(item)">
						{{item}}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	//导入swiper组件内容[周期函数内,第一第二阶段,如果是请求的数据进行轮播,建议在第三阶段执行]
	import Swiper from 'swiper';
	export default {
		name: 'MobileBooksGit',
		data() {
			return {
				pressList: [],
				publicationData: [],

			}
		},
		// 组件模板渲染完成后
		async mounted(){
			// 出版日期循环
			let maxYear = new Date().getFullYear();
			for (let i = 2010; i <= maxYear; i++) {
				this.publicationData.push(i.toString());
			}
			await this.$axios.get("/api/public/type/findAll2").then(res => {
				this.pressList = res.data.data
			})
			
			// 调用轮播对象
			await new Swiper('.presslist', {
				slidesPerView: 'auto',
				spaceBetween: 20,
			});
			
			// await this.$axios.post("/api/login", "username=" + 'adm' + "&password=" + '123456').then(res => {
			// 	console.log(res.data)
			// })
		},
		methods: {
			findBook(typeid) {
				this.$emit('typeid', typeid)
			},
			findBook2(typedate) {
				this.$emit('typedate', typedate)
			}
		}
	}
</script>

<style scoped>
	.booksgit {
		width: 100%;
	}

	.booksgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
	}

	.booksgit .tablist .tab {
		height: 2.5rem;
		line-height: 2.5rem;
	}

	.booksgit .tablist .tab li {
		font-size: 0.875rem;
		/* 不设置任何宽度，包括 0 */
		width: unset;
		color: #715e3e;
	}

	.booksgit .tablist .tab li a {
		color: #715e3e;
	}
</style>